<template>
    <div class="wrap">
  		<header-v></header-v>
  		
  		<div class="pro-content">
  		    <div class="title">
                <router-link to="/proList">课程介绍</router-link>
                <p>——   COURSE INTRODUCTION   ——</p>
            </div>
            <div class="tab">
                <ul>
                   <li><router-link to="/proList">外语培训</router-link></li>
                   <li><router-link to="/proList">电脑培训</router-link></li>
                   <li><router-link to="/proList">资格认证</router-link></li>
                   <li><router-link to="/proList">学历教育</router-link></li>
                   <li><router-link to="/proList">才艺培训</router-link></li> 
                </ul>
            </div>
            <div class="con">
                <grid :rows="2">
                    <grid-item :label="'微软系统工程师（MC......'" link="/" >
                        <img slot="icon" src="../../assets/subject_01.png" alt="微软系统工程师（MC......" />
                        <p class="classify">电脑培训</p>
                        <p class="money">价格: <span>632.00</span></p>
                    </grid-item>
                    <grid-item :label="'考研计算机'" link="/" >
                        <img slot="icon" src="../../assets/subject_02.png" alt='考研计算机' />
                        <p class="classify">电脑培训</p>
                        <p class="money">价格: <span>1100.00</span></p>
                    </grid-item>
                </grid>
                <grid :rows="2">
                    <grid-item :label="'会计学'" link="/" >
                        <img slot="icon" src="../../assets/subject_03.png" alt="会计学" />
                        <p class="classify">资格认证</p>
                        <p class="money">价格: <span>1150.00</span></p>
                    </grid-item>
                    <grid-item :label="'社交舞'" link="/" >
                        <img slot="icon" src="../../assets/subject_04.png" alt='社交舞' />
                        <p class="classify">才艺培训</p>
                        <p class="money">价格: <span>400.00</span></p>
                    </grid-item>
                </grid>
                <grid :rows="2">
                    <grid-item :label="'中国动漫全能艺术设计......'" link="/" >
                        <img slot="icon" src="../../assets/subject_05.png" alt="中国动漫全能艺术设计......" />
                        <p class="classify">才艺培训</p>
                        <p class="money">价格: <span>4500.00</span></p>
                    </grid-item>
                    <grid-item :label="'专业平面广告设计'" link="/" >
                        <img slot="icon" src="../../assets/subject_06.png" alt='专业平面广告设计' />
                        <p class="classify">才艺培训</p>
                        <p class="money">价格: <span>2200.00</span></p>
                    </grid-item>
                </grid>
                <div class="page">
                    <span>共 <span>40</span> 条记录 </span>
                    <router-link to="/" class="num active">1</router-link>
                    <router-link to="/" class="num">2</router-link>
                    <router-link to="/" class="num">3</router-link>
                    <router-link to="/" class="num">4</router-link>
                    <router-link to="/" class="num">5</router-link>
                    <span> ... </span>
                    <router-link to="/" class="num">7</router-link>
                    <router-link to="/" class="num">下一页</router-link>
                    <router-link to="/" class="num">末页</router-link>
                </div>
            </div>
  		</div>
  		
  		<footer-v></footer-v>
  </div>
</template>


<script>
import header from '../public/header'
import footer from '../public/footer'
import { Grid, GridItem } from 'vux'

export default {
	
  components: {
  	headerV : header,
  	footerV : footer,
    Grid,GridItem
  },
  data () {
    return {
        
    }
  },
  methods : {
    
  }
}
</script>


<style type="text/css">
	/* Product.style */

    .pro-content .con {text-align:center; clear:both; }       
    .pro-content .tab a{ width:0.97rem; height:0.36rem; background:rgba(137,190,46,1); line-height:0.36rem; float:left; text-align:center; color:#fff; display:block; margin-left:0.05rem; border-radius:0.03rem 0.03rem 0.03rem 0.03rem; margin-bottom:0.1rem; } 
    .pro-content .con .money{color:#ACACAC; line-height:0.22rem;}
    .pro-content .money span{color:#FF3C00;}
    .pro-content .classify{color:#89be2e;}
    .pro-content .classify:hover{ color:#2c90ff;}
    .pro-content .weui-grid{background:none !important; }
    .pro-content .weui-grid__icon{width:1.4rem !important; height:1.86rem !important;}
    .pro-content .weui-grid__icon img{ width:1.4rem !important; height:1.86rem !important;}
    .pro-content .weui-grid{ width:1.5rem; height:2.7rem; text-align:left;}
    .pro-content .weui-grid__label{text-align:left; }
    .pro-content .weui-grid__label span{font-size:0.12rem;}
</style>
